// pages/category/index.js
import { request } from '../../request/index.js';

Page({
  data: {
    // 左侧菜单数据
    leftMenuList: [],
    // 右侧商品数据
    rightItemList: [],
    // 激活的菜单栏目
    currentIndex: 0,
    // 右侧内容离顶部距离
    scrollTop: 0
  },

  // 接口返回数据
  Cates: [],

  // 获取分类数据
  // 使用 ES7 特性的 aysnc
  async getCateList () {
    // request({
    //   url: '/categories'
    // }).then(res => {
    //   this.Cates = res.data.message;
    //   // 缓存优化: 将数据与时间戳信息打包存储到本地中
    //   wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
    //   let leftMenuList = this.Cates.map(v => v.cat_name);
    //   // 初始分类页
    //   let rightItemList = this.Cates[0].children;
    //   this.setData({
    //     leftMenuList,
    //     rightItemList
    //   })
    // })

    const res = await request({ url: '/categories' });
    // 以上代码没有执行是不会执行以下代码的
    this.Cates = res;
    wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
    let leftMenuList = this.Cates.map(v => v.cat_name);
    // 初始分类页
    let rightItemList = this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightItemList
    })
  },

  // 左侧菜单点击事件
  handleMenuItemTap (e) {
    const { index } = e.currentTarget.dataset;
    let rightItemList = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightItemList,
      scrollTop: 0
    })
  },

  onLoad: function (options) {
    // 缓存优化
    /**
     * 0. 小程序本地存储
     *    web: localStorage.setItem("key", "value")  localStorage.getItem("key")
     *    vx: wx.setStorageSync("key", "value") wx.getStorageSync("key")
     *    web中不管存入什么数据, 最终都会调用数据的 toString(), 再存入
     *    vx中不存在类型转换, 存入的是什么数据, 获取时就是什么类型的
     * 1. 先判断本地存储中有没有旧的可用数据
     * 2. 没有则发送新请求
     * 3. 有, 同时旧数据没有过期就直接使用旧数据
     */
    const Cates = wx.getStorageSync("cates");
    if (!Cates) {
      // 不存在则重新获取
      this.getCateList();
    } else {
      // 存在旧数据 (定义过期时间: 测试1000ms)
      if (Date.now() - Cates.time > 1000 * 10) {
        // 过期了重新获取
        this.getCateList();
      } else {
        // 可以直接使用
        this.Cates = Cates.data;
        // 渲染数据
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightItemList = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightItemList
        })
      }
    }

  }
})